<template>
  <div>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      ></el-tab-pane>
    </el-tabs>
    <div class="container">
      <el-row>
        <el-col :span="12">
          <span style="font-size:18px; font-weight:bold;">优惠券管理</span>
        </el-col>
        <el-col style="text-align:right;" :span="12">
          <el-button
            @click="
              editVisible = true;
              currentId = null;
            "
            type="primary"
            size="small"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="couponList"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column label="名称" prop="coupon_name"> </el-table-column>
        <el-table-column v-if="tabName == '1'" label="类别">
          <template slot-scope="scope">
            <div>{{ scope.row.kind_name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tabName == '2'"
          label="可使用商品"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <img
              style="width:50px; height:50px;"
              :src="scope.row.img_show"
              alt=""
            />
            <div>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="满减" width="100" align="center">
          <template slot-scope="scope">
            满{{ scope.row.meet }}减{{ scope.row.minus }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量"> </el-table-column>
        <el-table-column label="有效期" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.start_at.split(" ")[0] }} -
            {{ scope.row.stop_at.split(" ")[0] }}
          </template>
        </el-table-column>
        <el-table-column label="是否发布">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_publish"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              @change="couponPublic(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              @click="
                editVisible = true;
                currentId = scope.row.id;
              "
              type="primary"
              size="small"
              >编辑</el-button
            >
            <el-button @click="deleteCoupon(scope.row.id)" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <edit-coupon
      :visible="editVisible"
      :id="currentId"
      :status="tabName"
      @close="editVisible = false"
    ></edit-coupon>
  </div>
</template>

<script>
import editCoupon from "./component/add-coupon";
import { getCouponList, addCoupon ,deleteCoupon } from "@/api/promotion-mng";
export default {
  name: "Coupon",
  data() {
    return {
      editVisible: false,
      tabList: [
        {
          name: "类别优惠券",
          id: "1"
        },
        {
          name: "产品优惠券",
          id: "2"
        }
      ],
      tabName: "1",
      couponList: [],
      tableHeight: 0,
      currentId: null
    };
  },
  watch: {
    tabName: function(val) {
      this.couponList = [];
      this.getCouponList();
    }
  },
  methods: {
    deleteCoupon(id) {
      this.$confirm("确认删除该优惠券?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCoupon({ id }).then(res => {
          if (res.code === 200) {
            this.getCouponList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        });
      });
    },
    couponPublic(row) {
      addCoupon({
        id: row.id,
        is_publish: row.is_publish
      }).then(res => {});
    },
    getCouponList() {
      getCouponList({
        status: this.tabName
      }).then(res => {
        if (res.code === 200) {
          this.couponList = res.data;
        }
      });
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getCouponList();
    this.changeSize();
  },
  components: {
    editCoupon
  }
};
</script>

<style></style>
